<template>
  <div class="my-tab-bar">
    <!-- 
      底部封装-1.7.循环渲染数组
      底部高亮-2.2.动态绑定 class，默认第一个为高亮
      底部高亮-2.3.定义点击事件，传入索引
      组件切换-3.5.给点击事件传入数组中对应的组件名称 componentName
     -->
    <div
      v-for="(item, index) in list"
      :key="index"
      class="tab-item"
      :class="{ current: index === num }"
      @click="switchFn(item.componentName,index)"
    >
      <!-- 底部封装-1.8.动态绑定图标 -->
      <span class="iconfont" :class="item.iconText"></span>
      <!-- 底部封装-1.8.渲染文字 End -->
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 底部封装-1.2. props 定义接收的数据
    list: {
      // 底部封装-1.3.定义接收的数据的类型为数组
      type: Array,
      // 底部封装-1.4.定义必须要填写数据
      required: true,
      // 底部封装-1.5.定义自定义验证
      validator(val) {
        // 底部封装-1.6.判断数组的长度是否小于2或者大于5，如果是，则报错，如果不是，则通过
        return val.length < 2 || val.length > 5 ? false : true;
      },
    },
    // 组件切换-3.3. props 定义接收的数据
    switch: {
      // 组件切换-3.4.定义接收的数据的类型为字符串
      type: String,
    },
  },
  data() {
    return {
      // 底部高亮-2.1.定义底部高亮变量
      num: 0,
    };
  },
  methods: {
    switchFn(path,index) {
      // 底部高亮-2.4.把点击的下标赋值给 num , End
      this.$router.push({
        path
      })
      this.num = index;
      // 组件切换-3.6.触发 switch 事件，向父组件传入 componentName
    },
  },
};
</script>

<style lang="less" scoped>
.my-tab-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.current {
  color: #1d7bff;
}
</style>
